<template>
    <form method="post" style="height: 100%; width: 100%">
        <div style="width: 100%; float: left">
            <!-- <div style="width: 5px; height: 100%; float: left; background-color: #356cb3"><font style="font-size: 30px">&nbsp;</font></div>
            <div style="width: 90%x; float: left; "><font style="font-size: 30px">立项呈报表</font></div>
            <br>
            <br>
            <br> -->
            <div style="width: 20%; height: 100%; float: left">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="fileUrl" label="附件链接" width="143px">
                        <span slot-scope="scope">
                            <el-link :underline="false" type="primary" @click="showurl(scope.row.fileUrl)">{{ scope.row.fileName }}</el-link>
                        </span>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            prop="cz"
                            width="100px"
                            align="left"
                            header-align="left"
                            style="vertical-align: bottom; text-align: left; height: 10%"
                        >
                            <template slot-scope="scope">
                                <span style="cursor: pointer" class="fontNormal" @click="del(scope.row.id)" > 删除 </span>
                            </template>
                        </el-table-column>
                </el-table>
                <el-button type="primary" @click="trigger()" class="bthNormal">附件上传</el-button>
                    <input
                        type="file"
                        ref="fileBtn"
                        id="uploadFile"
                        accept="image/*"
                        @change="getFile($event)"
                        multiple="multiple"
                        hidden
                    />
            </div>
            <div style="width: 79%; height: 100%; float: right">
                <div>
                    
                </div>
                <div style="width: 100%; height: 100%" id="iddivframe">
                    <iframe id="idframe" src="" frameborder="0" style="width: 100%; height: 100%"></iframe>
                </div>
            </div>
        </div>
        <!-- <el-divider class="divider_top"></el-divider> -->
    </form>
</template>

<script>

import information from '@/api/fj/fj.js';

export default {
   
    data() {
        return {
            tableData: []
        };
    },
    created() {
       if($('#idframe', window.parent.document).attr('data-id') ==  "undefined"){
            alert("请选择项目")
            this.$router.push({path: '/lx_info'});
        }else{
            
               this.getInfo();
              
        }
    },
    methods: {
        del(id){
            // console.log(id)
            this.$confirm('此操作将删除当前附件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                information.del(id).then((res) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    this.$nextTick(() => {
                        this.getList();
                    });
                });
            });
        },
        trigger() {
            this.$refs.fileBtn.dispatchEvent(new MouseEvent('click'));
        },
        getFile(event) {
            let file = event.target.files[0];
            let form = new FormData();
            form.set('files', file);
            form.set('proId', $('#idframe', window.parent.document).attr('data-id'));
            form.set('type', 28);
            information.save(form).then(rep => {
                this.$message({
                        type: 'success',
                        message: '上传成功'
                    });
            this.$nextTick(() => {
            this.getInfo();
            }); 
            })//上传到服务器
        },
        showurl(url) {
            $('#iddivframe').html('<iframe id="idframe" src="' + url + '" frameborder="0" style="width: 100%; height: 550px"></iframe>');
        },
        shutdown() {
            window.close();
        },
        getInfo() {
            let form = new FormData();
            form.set('proId', $('#idframe', window.parent.document).attr('data-id'));
            form.set('type', 28);
            information.openInfo(form).then((response) => {
                console.log(response.data);
                this.tableData = response.data;
            });
        }
    }
};
</script>
<style>
.divider_top {
    margin: 0 0 0 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
#id_tabs div.el-tabs__content {
    padding: 0;
}
</style>